<template>
<!-- 产品管理页面 -->
  <div class="fillcontain">
    <!-- 添加 -->
    <div class="searchArea">   
       <el-button type="primary" size="small" icon="el-icon-plus" @click="addProduct" class="mb-2">添加产品</el-button>
    </div>
    <div class="table_container pb-3">
      <el-table
        size="mini"
        border
        :data="productList"
        style="width: 100%"
        align="center">
        <el-table-column
          prop="product_name"
          label="产品名称"
          align="center">
        </el-table-column>
        <el-table-column
          prop="specifications"
          label="产品规格"
          align="center">
        </el-table-column>
        <el-table-column
          prop="process_code"
          label="工艺代号"
          align="center">
        </el-table-column>
        <el-table-column
          prop="sop_name"
          label="sop"
          align="center">
        </el-table-column>
        <el-table-column 
          label="操作"
          align="center"
          width="400">
          <template slot-scope="scope">
             <el-button 
               type="success" 
               size="mini"
               @click="uploadFile(scope.row)"
             >上传sop</el-button>
             <el-button 
               type="success" 
               size="mini"
               @click="sopFile(scope.row,0)"
             >下载</el-button>
             <el-button 
               type="success" 
               size="mini"
               @click="sopFile(scope.row,1)"
             >查看sop</el-button>
             <el-button 
               type="warning" 
               size="mini"
               @click="updateProduct(scope.row)"
             >修改</el-button>
             <el-button 
               type="danger" 
               size="mini"
               @click="removeProduct(scope.row.product_id)"
             >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 添加产品对话框 -->
    <product-dialog
      v-if="Dialog.show"
      :isShow="Dialog.show"
      :dialogRow="Dialog.dialogRow"
      :title="Dialog.title"
      @closeDialog="Dialog.show=false"
      @getDataList="getProductList"/>
    <!-- 上传sop对话框 -->
    <sop-dialog
      v-if="sop.show"
      :isShow="sop.show"
      :dialogRow="sop.dialogRow"
      @closeDialog="sop.show=false"
      @refreshList="getProductList"/>
  </div>
</template>

<script>
import {productList,removeProduct,downloadSop} from '@/api/product.js'
import fileDownload from 'js-file-download'
import {conversionStreamToUrl} from '@/utils'
import ProductDialog from './childComps/ProductDialog.vue'
import SopDialog from './childComps/SopDialog.vue'
export default {
  components:{
    ProductDialog,
    SopDialog
  },
  data () {
    return {
      productList:[],
      Dialog: {
         show: false,
         dialogRow: {},
         title:''
       },
      sop:{
         show: false,
         dialogRow: {},
      }
    }
  },
  created(){
     this.getProductList()//获取产品列表
  },
 methods:{
     //获取产品列表
    async getProductList(){
      const res = await productList({is_page:0})
      this.productList=res.data
    },
      //添加产品
    addProduct(){
       this.Dialog.title="添加产品"
       this.Dialog.show=true
    },
    //修改产品
    updateProduct(row){
     this.Dialog.title="修改产品"
     this.Dialog.dialogRow=row 
     this.Dialog.show=true
    },
      //单选框
    changeRadio(row){
     this.radioVal=row.product_no
     this.taskForm.product_no=this.radioVal
    },
    //上传sop
    uploadFile(row){
     this.sop.dialogRow=row
     this.sop.show=true

    },
   //sop操作 type:0下载 1查看
   async sopFile(row,type){
    if(row.sop_name){
        const res= await downloadSop(row.product_id)
      if(type===0){       
         fileDownload(res,row.sop_name)
      }else if (type===1){
        const res= await downloadSop(row.product_id)
        const url=conversionStreamToUrl(res)
        this.$router.push({path:'/pro/sop',query:{url}})
      }
    }else{
        this.$message.warning('请先上传sop文件')
     }
    },
     //删除产品
    removeProduct(product_id){
       this.$confirm("此操作将删除该产品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
          await removeProduct(product_id);
          this.$message.success('删除产品成功！')
          this.getProductList(); 
      })
    },
 }
}
</script>
<style lang='scss' scoped>
</style>